<template>
  <div class="item-config">
    <el-form
       label-width="100px"
       label-position="top"
      :model="veeambackup365ConfigForm"
      ref="veeambackup365-form"
      :rules="veeambackup365ConfigRules"
    >
       <div class="site_port_row">
        <el-form-item :label="$t('custom.connector.veeambackup365.domain')" prop="domain" style="width: 60% ;">
          <el-input
            v-model="veeambackup365ConfigForm.domain"
            :placeholder="$t('custom.connector.veeambackup365.interdomain')" style="width: 100% !important;"
          ></el-input> 
        </el-form-item >  
        <span style="padding-top: 33px">&nbsp&nbsp:&nbsp&nbsp</span>
        <el-form-item prop="port" style="width: 22%;padding-top: 28px" > 
            <el-input
            v-model="veeambackup365ConfigForm.port"
            :placeholder="$t('custom.connector.veeambackup365.interport')"  
            ></el-input>
        </el-form-item>
       </div>
      <el-form-item :label="$t('custom.connector.veeambackup365.username')" prop="username">
        <el-input
          v-model="veeambackup365ConfigForm.username"
          :placeholder="$t('custom.connector.veeambackup365.interuserName')"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('custom.connector.veeambackup365.password')" prop="password">
        <el-input
          v-model="veeambackup365ConfigForm.password"
          :type="SecretKeyCheck?'text':'password'"
          :placeholder="$t('custom.connector.veeambackup365.interpassword')"
        >
        <i slot="suffix" :class="SecretKeyCheck?'cuifont icon_eye_show':'cuifont icon_eye_hide'"
                      @click="SecretKeyCheck=!SecretKeyCheck"></i>
        </el-input>
      </el-form-item>
      <el-form-item>
        <!-- <el-button
          style="width:100px;"
          size="small"
          @click="cancelThisConfig"
          >{{ $t('cancel') }}</el-button
        > -->
        <el-button
          type="primary"
          :loading="testLoading"
          style="width:165px;margin-top: 6px;"
          size="small"
          @click="startTestConfig"
          >{{ $t('custom.connector.savequickbookspath') }}</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { Component } from './modules/Component.js'
import Trail from '@/components/storybook/mixins/trail'

export default {
  mixins: [Trail],

  props: {
    veeambackup365ConfigForm: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },

  data () {
    return {
      SecretKeyCheck: false,
      veeambackup365ConfigRules: {
        domain: [
          {
            required: true,
            message: this.$t('custom.connector.veeambackup365.interdomain'),
            trigger: 'blur',
            pattern: '[^ \x22]+'
          }
        ],
        port: [
          {
            required: true,
            message: this.$t('custom.connector.veeambackup365.interport'),
            trigger: 'blur',
            pattern: '[^ \x22]+'
          }
        ],
        username: [
          {
            required: true,
            message: this.$t('custom.connector.veeambackup365.interuserName'),
            trigger: 'blur',
            pattern: '[^ \x22]+'
          }
        ],
        password: [
          {
            required: true,
            message: this.$t('custom.connector.veeambackup365.interpassword'),
            trigger: 'blur'
          }
        ]
      },
      portList: [
        '1280', '1281','443'
      ],
      testLoading: false
    }
  },
  created () {

  },
  methods: {
    cancelThisConfig () {
      this.veeambackup365ConfigForm = {
        domain: null,
        port: null,
        username: null,
        password: null
      }
    },
    startTestConfig () {
      this.validateConfigForm().then(() => {
        this.testLoading = true
        const params = {
          ...this.veeambackup365ConfigForm,
          tenantId: this.$store.state.user.tenantCode,
          subjectCode: 'VEEAMBACKUP365'
        }
        this.$interface.taskManager
          .postClientData(params)
          .then(({ data: res }) => {
            if (res.code !== 0) {
              this.testLoading = false
              Component.$emit('getConnectorConfig')
              return this.$message.error(res.msg)
            }
            this.testLoading = false
            this.synctdData()
            return this.$message.success(res.msg)
          }).catch(() => {
            this.testLoading = false
          })
      })
    },
    validateConfigForm () {
      return this.$refs['veeambackup365-form'].validate()
    },
    synctdData (itemInfo) {
      const params = {
        tenantId: this.$store.state.user.tenantCode,
        subjectCode: 'VEEAMBACKUP365'
      }
      this.$interface.taskManager.syncClientData(params).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }

        if (itemInfo && res.data && res.data.sync) {
          itemInfo.sync.lastTime = res.data.sync.lastTime
          itemInfo.sync.status = res.data.sync.status
        }
        Component.$emit('getConnectorConfig')
        return this.$message.success(res.msg)
      }).catch(() => {
      })
    },
    detail () {

    }
  }
}
</script>

<style scoped>
.site_port_row {
  display: flex;
}
</style>
